import styled from "@emotion/styled"
import { Menu } from "antd"
import SubMenu from "antd/lib/menu/SubMenu"
import { Link, useLocation } from "react-router-dom"
import { DashboardOutlined, SendOutlined, ExceptionOutlined } from '@ant-design/icons';

interface Params {
    collapsed: boolean
}

const openKeys: any = {
    "/dashboard": '/dashboard',
    "/intentionalList": '/intent',
    "/intent": '/intent',
}

const Navigation = ({ collapsed }: Params) => {
    const location = useLocation()
    const pathname: string = location.pathname

    return (
        <MenuContainer mode={collapsed ? "vertical" : "inline"} selectedKeys={[pathname]} defaultOpenKeys={[openKeys[pathname]]} >
            <Menu.Item icon={<DashboardOutlined />} key={"/dashboard"}>
                <Link to={"/dashboard"}>首页</Link>
            </Menu.Item>
            <SubMenu icon={<SendOutlined />} key="/intent" title="进件服务">
                <Menu.Item icon={<ExceptionOutlined />} key="/intentionalList">
                    <Link to={"/intentionalList"}>待进件列表</Link>
                </Menu.Item>
            </SubMenu>
        </MenuContainer>
    )
}

const MenuContainer = styled(Menu)`
    height: 100%;
`

export default Navigation
